<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
import { getClassListApi, getCompanyList } from '@/api/table'
import { ref, reactive, unref, onMounted } from 'vue'
import { Form } from '@/components/Form'
import { useTable } from '@/hooks/web/useTable'
// 引入 饼图组件
import pieChart from './components/pie.vue';
import {
  ElOption,
  ElOptionGroup,

} from 'element-plus'
// 时间处理函数 
import { formatToDateTime, getHourMins } from "@/utils/dateUtil";
// 设置子组件 暂不加载
let sonFlag = ref(false)
// 定义下拉列表
const cid = ref(0)
// 
const { tableRegister, tableMethods, tableState } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const { startTime, endTime } = getTime()
    const res = await getCompanyList({ pageIndex: 1, pageSize: 999, startTime, endTime, cid: cid.value }).catch(e=>{ })


    if(!res.data){
      return {list:[]}
    }
    let list = []
    for (var i = 0; i < res.data.length; i++) {
      list.push({ name: res.data[i].nickname, company: res.data[i].company, times: res.data[i].times * 1 })
    }
    // let newList = []
    // {name:"",times:"",hm[]

    // for (var j = 0; j < list.length; j++) {
    //   let flag = true
    //   let item = list[j]
    //   for (var i = 0; i < newList.length; i++) {
    //     console.log(newList[i].hm, 28)
    //     if (newList[i].hm === getHourMins(item.times)) {
    //       console.log(2999)
    //       flag = false
    //       newList[i].name += `\n ${item.company}(${item.name})`
    //     }
    //   }
    //   if (flag) {
    //     newList.push({ name: `${item.company}(${item.name})`, times: formatToDateTime(item.times), hm: getHourMins(item.times) })
    //   }
    // }

    const newList = list.reduce((acc, item) => {
      const existingItem = acc.find((i) => i.hm === getHourMins(item.times));
      if (existingItem) {
        existingItem.name += ` ${item.company}(${item.name})`;
      } else {
        acc.push({
          name: `${item.company}(${item.name})`,
          times: formatToDateTime(item.times),
          hm: getHourMins(item.times),
        });
      }
      return acc;
    }, []);
    console.log(newList, 38)

    return {
      list: newList,
      total: newList.length
    }
  }
})
// 获取 今天 0点 到 明天0点时间
const getTime = () => {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const timestamp = today.getTime();
  return { startTime: timestamp, endTime: timestamp + (24 * 60 * 60 * 1000) }
}
// 加载效果 和数据获取 
const { loading, dataList } = tableState
// 表格事件的方法


// const { t } = useI18n()

const columns = reactive<TableColumn[]>([
  {
    field: 'times',
    label: '时间',
  }, {
    field: 'name',
    label: '公司名（面试人）',
    showOverflowTooltip: false,
  }
])
// const { allSchemas } = useCrudSchemas(columns)
const classList = ref(null)
const schema = reactive([])
onMounted(async () => {
  let { data } = await getClassListApi({ pageIndex: 1, pageSize: 100 })
  console.log(data.list)
  cid.value = data.list[0].cid
  sonFlag.value = true
  let optionList = data.list.reduce((acc, item) => {
    acc.push({ label: item.bak + item.name, value: item.cid })
    return acc
  }, [])
  schema.push({
    field: 'cid',
    label: "班级",
    component: 'Select',
    componentProps: {
      options: optionList,
      on:{
        change:(item)=>{
          cid.value=item
          console.log(tableMethods,120000)
          tableMethods.refresh()
        }
      },
      slots: {
        default: (options: SelectOption[]) => {
          // console.log(options,115)
          if (options.length) {
            return options?.map((v) => {
              // console.log(v,118)
              return <ElOption key={v.value} label={v.label} value={v.value} />
            })
          } else {
            // console.log("zoule")
            return null
          }
        },
        prefix: () => <Icon icon="ep:calendar" />
      }
    }
  })

})


</script>

<template>

  <ContentWrap>
    <Form :schema="schema" label-width="auto" :label-position="isMobile ? 'top' : 'right'" />

  </ContentWrap>
  <div class="contents">
    <div>
      <ContentWrap title="今日面试统计">
        <Table v-if="sonFlag" :columns="columns" :data="dataList" :loading="loading" />
      </ContentWrap>
    </div>
    <div>
      <ContentWrap title="面试总数据统计">
        <pieChart v-if="sonFlag" :cid="cid"></pieChart>
      </ContentWrap>
    </div>
  </div>


</template>

<style lang="less" scoped>
.el-button {
  margin-top: 10px;
}

.contents {
  width: 100%;
  display: flex;
}

.contents div {
  flex: 1;
}
</style>
